<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">創建</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="輪播:" required style="align-items:flex-start;font-weight:bold;">
                  <el-upload class="upload-demo" drag :headers="headers" :action="$upUrl" name="images" :on-success="onSuccess" :on-remove="onRemove" ref="upload">
                    <template v-if="img == ''">
                      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                      <div class="el-upload__text">
                        拖拽文件到這裏，或 <em>點此添加</em>
                      </div>
                    </template>
                    <template v-else>
                      <el-image style="width: 100px; height: 100px" :src="img" fit="cover" />

                    </template>

                  </el-upload>
                </el-form-item>
                <el-form-item label="标题:" required>
                  <el-input v-model="title" placeholder="请输入标题" style="width: 380px"></el-input>


                </el-form-item>
                <el-form-item label="展示時間:" required>
                  <el-input :model-value="selectTime" placeholder="请選擇展示时间" style="width: 380px" :suffix-icon="ArrowRight"></el-input>

                  <div class="opcaticy0">
                    <el-date-picker v-model="time" type="daterange" start-placeholder="Start date" value-format="YYYY/MM/DD" end-placeholder="End date" :default-time="defaultTime" @change="(e) => change(e)" />
                  </div>


                </el-form-item>
                <el-form-item label="是否展示:">
                  <el-switch v-model="isShow" class="ml-2" style="--el-switch-on-color: #3a3f63; --el-switch-off-color: #dcdfe6" />

                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>
        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import type { FormProps } from 'element-plus'
import { UploadFilled, ArrowRight } from '@element-plus/icons-vue'
import { editSwiper } from '@/api/swiper'
import { baseURL, headers, formateDate } from '@/utils/utils'

const labelPosition = ref<FormProps['labelPosition']>('right')
const title = ref('')
const isShow = ref(true)
const selectTime = ref('')
const time = ref('')//轮播图展示时间
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const upload = ref()
const img = ref('')
// 提交
const submit = () => {
  if (img.value == '') {
    return ElMessage.error('请上传轮播图')
  }
  if (title.value == '') {
    return ElMessage.error('请输入标题')
  }

  if (selectTime.value == '') {
    return ElMessage.error('请选择展示时间')
  }
  editSwiper({
    is_show: isShow.value ? 1 : 0,
    image: img.value,
    title: title.value,
    start_show: formateDate(time.value[0]),
    end_show: formateDate(time.value[1])
  }).then((res) => {
    console.log('添加轮播图', res)
    router.back()
  })
}
// 重置
const reset = () => {
  img.value = ''
  title.value = ''
  selectTime.value = ''
  time.value = ''
  isShow.value = true
  upload.value.clearFiles()
}
// 移除文件
const onRemove = (res) => {
  console.log('移除文件', res)
  img.value = ''
}
const onSuccess = (res) => {
  // console.log('上传成功', res[0].path)
  let path = res.data[0].path
  let fullpath = `${baseURL}${path}`
  img.value = fullpath

}
// 日期选择器
const change = (val) => {
  console.log('选择时间', val)
  console.log(JSON.parse(JSON.stringify(time.value)))
  selectTime.value = `${formateDate(time.value[0])}-${formateDate(time.value[1])}`
  console.log(formateDate(time.value[0]))
}
const handleSelect = (e) => {
  console.log('e----', e)
  // e.stopImmediatePropagation()
  // e.stopPropagation()
  e.preventDefault()

}


const formLabelAlign = reactive({
  name: '1',
  region: '',
  type: '',
})
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-upload-dragger) {
  border: 1px solid #dcdfe6;
  width: 380px;
}

:deep(.el-upload-dragger .el-upload__text em) {
  color: #3a3f63;
  font-weight: bold;
}



:deep(.el-input) {
  border-radius: 5px 5px !important;
  /* overflow: hidden; */
  box-shadow: none;
}
</style>